<template>
  <div>
      <!-- 
        接口：https://api.xin88.top/douban/movies.json 
        此接口的图片带有防盗功能，需要在 index.html中解除防盗
       -->
       <!-- <button @click="getData">获取数据</button> -->
       <div v-if="data" class="box">
        <div v-for="{cover,id,is_new,rate,title} in data.subjects" :key="id">
          <img :src="cover" alt="title">
          <div>
            <span v-if="is_new" class="xin">新</span>
            <span>{{title}}</span>
            <span>{{rate}}</span>
          </div>
        </div>
       </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        data: null
      }
    },
    methods: {
      getData() {
        const url = 'https://api.xin88.top/douban/movies.json '
        axios.get(url).then(res=>{
          console.log(res);
          this.data=res.data
        })
      }
    },

    // 钩子函数：一类特殊功能的函数，会在特殊的时间自动被触发
    mounted () {
      // 当dom元素显示到页面上时，自动触发
      console.log('mounted:被安装到页面上');
      // 当前.vue文件创建完成后 显示到页面上后，立刻自动祝福获取数据
      this.getData()
    },
  }
</script>

<style lang="scss" scoped>
.box{
  display: flex;
  flex-wrap: wrap;
  >div{
    display: flex;
    flex-direction: column;
    margin: 0 10px 10px 0;
    width: 170px;
    >img{
      width: 100%;
    }
    >div{
      display: flex;
      justify-content: center;
      margin-top: 5px;
      > .xin{
        background-color: red;
        padding: 0 2px;
        color: white;
      }
      >sapn:last-child{
        color: red;
      }
    }
  }
}
</style>
